<script setup lang="ts">
  import { defineEmits, Ref, ref, onMounted, defineProps } from 'vue';
  import MyOrgSelect from '@/components/my/MyOrgSelect.vue';
  import MyDicSelect from '@/components/my/MyDicSelect.vue';
  import { {{ pascal_case }}DTO } from './{{kebab_case}}';
  import { getById, addOrModify } from './{{kebab_case}}.api';

  const props = defineProps<{
    id: string;
  }>();
  const emits = defineEmits(['switch']);
  const form: Ref<{{ pascal_case }}DTO> = ref({
  {% for column in columns %}
  // {{ column.注解 }}
  {{ to_camel_case(column.列名) }}:{%if column.默认值 is not none%}{{column.默认值}}{%else%}''{%endif%},{% endfor %}
  } as {{ pascal_case }}DTO);
  const handleSubmit = async ({ values, errors }: any) => {
    if (!errors) {
      await addOrModify(values);
      emits('switch', 'table');
    }
  };
  const onReset = () => {
    emits('switch', 'table');
  };
  onMounted(async () => {
    if (props.id) {
      const { data } = await getById(props.id);
      form.value = data as {{ pascal_case }}DTO;
    }
  });
</script>

<template>
  <div class="form-box">
    <a-form :model="form" auto-label-width @submit="handleSubmit">
      <a-space style="margin-bottom: 20px">
        <a-button @click="onReset">取消</a-button>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-space>
      <a-row>
        <a-col :span="4"></a-col>
        <a-col :span="16">
          <a-row>
{% for column in columns %}{%if column.前端表单 == '是' %}
    <a-col :span="12">
      <a-form-item
        field="{{ to_camel_case(column.列名) }}"
        label="{{ column.注解 }}"
        {% if column.必填 == '是' %}required{% endif %}
        :rules="[{% if column.必填 == '是' %}{ required: true, message: '{{ column.注解 }}不能为空' }{% endif %}, { maxLength: {{column.长度}}, message: '长度不能超过{{column.长度}}个字符' }]"
      >
      {%if column.前端表单组件 == 'input' %}
         <a-input v-model="form.{{to_camel_case(column.列名)}}" placeholder="请输入{{ column.注解 }}" />
      {%elif column.前端表单组件 == 'select' %}
      <a-select v-model="form.{{to_camel_case(column.列名)}}" placeholder="请选择{{ column.注解 }}">
        
      </a-select>
      {%elif column.前端表单组件 == 'boolean' %}
       <a-radio-group
                  v-model="form.{{to_camel_case(column.列名)}}"
                  type="button"
                  placeholder="请输入{{ column.注解 }}"
                >
                  <a-radio :value="true">是</a-radio>
                  <a-radio :value="false">否</a-radio>
                </a-radio-group>
      {%elif column.前端表单组件 == 'org' %}
       <MyOrgSelect v-model="form.{{to_camel_case(column.列名)}}" placeholder="请选择{{ column.注解 }}" org-type="{{column.前端字典}}" />
      {%elif column.前端表单组件 == 'date-picker' %}
      <a-date-picker
                  v-model="form.{{to_camel_case(column.列名)}}"
                  type="{{column.DB类型}}"
                  placeholder="请选择{{ column.注解 }}"
                />
      {%elif column.前端表单组件 == 'img' %}
       <a-upload
                  v-model:file-list="form.{{to_camel_case(column.列名)}}"
                  style="height: 85px"
                  tip="文件大小在5MB"
                  :accept="acceptImg"
                  :data="{ type: 'SYSTEM' }"
                  :headers="headers"
                  :response-url-key="
                    (fileItem) => {
                      return '/api' + fileItem.response.data;
                    }
                  "
                  list-type="picture-card"
                  :limit="1"
                  action="/api/account/file/uploadToUrl"
                />
      {%elif column.前端表单组件 == 'textarea' %}
        <a-textarea v-model="form.{{to_camel_case(column.列名)}}" placeholder="请输入{{ column.注解 }}" />
      {%elif column.前端表单组件 == 'input-number' %}
        <a-input-number v-model="form.{{to_camel_case(column.列名)}}" 
                  placeholder="请输入{{ column.注解 }}"      
                  :mode="button"      
                  :step="1"
                  :precision="{{column.小数点}}"
                  :max="{{column.长度}}"
                  :min="0"/>
      {%elif column.前端表单组件 == 'dic' %}
        <MyDicSelect v-model="form.{{to_camel_case(column.列名)}}" placeholder="请选择{{ column.注解 }}" group-code="{{column.前端字典}}" />
      {%endif%}
      </a-form-item>
    </a-col>
{%endif%}{% endfor %} 
        <a-col :span="4"></a-col>
        </a-row>
         </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<style scoped lang="less"></style>
